<template>
    <div class="dv-operator">
        <a class="btn btn-primary" @click="active">active</a>
        <a class="btn btn-dark ms-2" @click="idle">idle</a>
        <br/>
        <a class="btn btn-primary mt-2" @click="tile">tile</a>
        <a class="btn btn-primary mt-2 ms-2" @click="disperse">disperse</a>
        <br/>
        <a class="btn btn-success mt-2" @click="focus">focus</a>
        <a class="btn btn-success ms-2 mt-2" @click="focusOut">focus out</a>
        <br/>
        <span v-if="err.length > 0" class="text-danger">{{err}}</span>
        <br/>
        <a class="btn btn-primary ms-0 mt-2" @click="primary">primary</a>
        <a class="btn btn-info    ms-2 mt-2" @click="info">info</a>
        <a class="btn btn-success ms-2 mt-2" @click="success">success</a>
        <br/>
        <a class="btn btn-warning ms-0 mt-2" @click="warning">warning</a>
        <a class="btn btn-danger  ms-2 mt-2" @click="danger">danger</a>
        <a class="btn btn-dark    ms-2 mt-2" @click="dark">dark</a>
    </div>
</template>

<script>
    import {mapActions} from "vuex"
    import {DvLayout, DvTheme} from "../../store/Enums";
    export default {
        name: "LayoutOperator",
        methods: {
            ...mapActions("dv_layout", [
                DvLayout.Actions.TILE,
                DvLayout.Actions.DISPERSE,
                DvLayout.Actions.FOCUS,
                DvLayout.Actions.FOCUS_OUT
            ]),
            ...mapActions("dv_theme", {
                "primary": DvTheme.Actions.PRIMARY,
                "info": DvTheme.Actions.INFO,
                "success": DvTheme.Actions.SUCCESS,
                "warning": DvTheme.Actions.WARNING,
                "danger": DvTheme.Actions.DANGER,
                "dark": DvTheme.Actions.DARK,
                "idle": DvTheme.Actions.IDLE,
                "active": DvTheme.Actions.ACTIVE
            })
        },
        computed: {
            err() {
                return this.$store.state.dv_layout.err
            }
        }
    }
</script>

<style lang="scss" scoped>
    .dv-operator {
        z-index: 1;
        position: fixed;
        top: 100px;
        left: 300px;
        [data-kt-aside-minimize] & {
            left: 100px;
        }
    }
</style>
